<template>
	<view class="container bg ">
		<view class="topbox plr-20">
			<u-icon name="arrow-left" color="#000" size="36" @click="backfn"></u-icon>
			<view class="searchbox pt-30">
				<u-search placeholder="请输入搜索内容" v-model="searchStr" placeholder-color="#999" color="#000" shape="square"
					bg-color="#fff" border-color="#F5F5F5" :show-action=true @search="toSearch" @custom="custom"
					@clear="clear">
				</u-search>
			</view>
		</view>
		<view class="">
			<view class=" ">
				<view class="market_list p10" style="" v-for="item in notice_list" @click="tonotice(item.id)">
					<view class="" style="width: 58%;">
						<view class="market_list_title fw" style="">
							{{item.title}}
						</view>
						<view class="flex1 size-20 market_list_category_name" style="">
							<view class="market_list_category_name_left">
								{{item.category_name}}
							</view>
							<view class="">
								{{item.create_time}}
							</view>
						</view>
					</view>
					<view class="rightbox">
						<image class="photo" :src="item.image" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchStr: '',
				// 平台公告列表
				notice_list: [],
			}
		},
		mounted() {
			
		},
		
		onShow() {
		 
			// // 公告初渲染
			// this.$http('api/index/noticeList/', this.query).then(res => {
			// 	this.notice_list = res
			// 	// console.log(this.notice_list);
			// })
		},
		onLoad(options) {
			console.log(options.name)
			this.searchStr=options.name
			this.toSearch()
		},
		methods: {
			clear() {
				this.searchStr = this.searchStr.trim()
				console.log(this.searchStr);
				this.$http('api/index/noticeList/', {
					search:''
				}).then(res => {
					this.notice_list = res
					// console.log(this.notice_list);
				})
			},
			tonotice(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pages/market/noticeDetail?id=' + id
				})
			},
			// 右边搜索控件触发事件
			custom() {
				this.toSearch()
			},
			backfn() {
				uni.navigateBack({
					url: '/pages/market/index'
				})
			},
			toSearch() {
				this.searchStr = this.searchStr.trim()
				console.log(this.searchStr);
				// 公告初渲染
				this.$http('api/index/noticeList/', {
					search: this.searchStr,
					page: 1,
					pagesize: 10
				}).then(res => {
					this.notice_list = res
					console.log()
					if(this.notice_list.length==0){
						uni.showToast({
							icon:"none",
							title:'暂无数据'
						})
					}
					// console.log(this.notice_list);
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.market_list_category_name {
		justify-content: space-between;
		margin: 30rpx 0 0 0;
	}

	.market_list_title {
		height: 80rpx;
		width: 400rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;


	}

	.market_list {
		display: flex;
		justify-content: space-between;
		border-bottom: 3rpx solid #E0E0E0;
		margin: 0px 0px 40px 0;
		height: 180rpx;
	}

	.rightbox {
		width: 260rpx;
		background-color: aqua;
		height: 140rpx;
	}




	.topbox {
		padding: 20rpx;
		background-color: #d6d6d6;

		display: flex;
		align-items: center;

		.searchbox {
			width: 90%;
			margin: 0rpx auto 20rpx;
		}
	}
</style>
